
<template>
  <div class="searchPane" >
    <Input v-model="searchTreeData" search />
    <!--<RadioGroup v-model="paneType" type="button" size="large">
      <Radio label="类型"></Radio>
      <Radio label="专题"></Radio>
    </RadioGroup>-->
   <!-- <Tree :data="layerType" @on-check-change="checkNode" show-checkbox  ref="c" :render="renderContent"></Tree>-->
 <el-tree :data="layerType" node-key="id" show-checkbox @check="nodeCheck" @node-click="selectNode"
      :expand-on-click-node="false" ref="c" :render-content="renderContent"></el-tree>
    <!--详细信息模态框-->
    <datal-modle ref="detailModal" title="详细信息" number="400" class="iview-historyM">
      <detail-table  :detailData ="detailDataList"></detail-table>
    </datal-modle>
   <!--历史信息弹出框-->
    <datal-modle ref="historyModal" title="历史版本" number="400" class="iview-historyM">
      <Table border  :columns="historyColumn" :data="historyData"  @on-selection-change="hisRowSelectChange"></Table>
    </datal-modle>
    <!--附件信息弹出框-->
    <datal-modle ref="attachModal" title="附件详情" number="400" class="iview-attachM">
      <Table border :columns="attachColumn" :data="attachData"></Table>
    </datal-modle>
    <!--查看附件-->
    <Modal
      v-model="attachShowModal"
      title="查看附件"  footer-hide width="100%"  fullscreen>
      <embed src="./static/Data/9551.pdf" type="application/pdf" width="100%" height="100%">
    </Modal>
    <!--图层筛选弹出框-->
    <datal-modle ref="queryModal" title="数据筛选" number="400" class="iview-queryM">
      <LayerFilter :LayerData="layerData"></LayerFilter>
    </datal-modle>
  </div>
</template>
<script>
import LayerManager from "./LayerManager";
import LayerFilter from "./LayerFilter";
import datalModle from "../public/modle.vue";
import detailTable from "../public/detailTable.vue";
export default {
  name: "Search2",
  components: {
    LayerFilter,
    datalModle,
    detailTable
  },
  data() {
    return {
      detailDataList: {
        name: "淳安县总体规划",
        fgfw: "淳安",
        dataTime: "2016年09月21日",
        uploadTime: "2018年01月03日",
        count: "1823个要素",
        descript: "",
        laiyuan: "淳安县域总体规划(2016年-2020年)",
        scsm: "信息中心收集、整理",
        beizhu: ""
      },
      layerType: [],
      buttonProps: {
        type: "default",
        size: "small"
      },
      detailModal: false,
      detailColumns: [
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        }
      ],
      detailData: {
        name: "淳安县总体规划",
        fgfw: "淳安",
        dataTime: "2016年09月21日",
        uploadTime: "2018年01月03日",
        count: "1823个要素",
        descript: "",
        laiyuan: "淳安县域总体规划(2016年-2020年)",
        scsm: "信息中心收集、整理",
        beizhu: ""
      },
      historyModal: false,
      attachModal: false,
      queryModal: false,
      historyColumn: [
        {
          title: "编号",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "数据名称",
          key: "name"
        },
        {
          title: "操作",
          type: "selection",
          width: 60,
          align: "center"
        }
      ],
      historyData: [
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        },
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        },
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        },
        {
          name: "哈哈哈哈多胡说对多的点点滴滴"
        }
      ],
      attachColumn: [
        {
          title: "编号",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "名称",
          key: "name"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.attachShow(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.attachDown(params.index);
                    }
                  }
                },
                "下载"
              )
            ]);
          }
        }
      ],
      attachData: [
        {
          name: "dhsfhwefggy"
        }
      ],
      attachShowModal: false,
      layerData: { name: "jjj" },
      paneType: "类型",
      searchTreeData: ""
    };
  },
  created: function() {
    var self = this;
    //http://115.233.209.175:8090/zh-CN/Map/LayerCatalog/GetTreeList?id=0
    var url =
      "http://115.233.209.175:8090/zh-CN/map/LayerCatalog/GetTreeList?id=0";
    var url2 = "./static/Data/tree_data4.json";
    this.$http
      .get(
        url,
        {},
        {
          emulateJSON: true
        }
      )
      .then(
        function(response) {
          var strLayer = JSON.stringify(response.body);
          self.layerType = JSON.parse(strLayer.replace(/text/g, "title"));
          console.log(self.layerType);
          // self.layerType.label=self.layerType.text;
          this.setLabel(self.layerType);
        },
        function(error) {
          self.$Message.error("加载地址！");
        }
      );
  },
  methods: {
    setLabel(layers) {
      for (var i = 0; i < layers.length; i++) {
        layers[i].label = layers[i].title;
        if (layers[i].children != null && layers[i].children) {
          // this.setLabel(layers[i]);
          if (! this.$options) {
              this.setLabel(layers[i].children)
          } else {
            this.$options.methods.setLabel(layers[i].children);
          }
        }
      }
    },

    //渲染自定义节点
         renderContent2(h, { node, data, store }) {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
            <span>
              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
            </span>
          </span>);
      },
    renderContent(h, { root, node, data }) {
      var _this = this;
      var content = h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          }
        },
        [
          h("span", [
            h(
              "span",
              {
                class: "ivu-tree-title",
                on: {
                  click: () => {
                    this.selectNode(data);
                  }
                }
              },
              data.title
            )
          ])
        ]
      );
      if (data.ishistory) {
        var creatButton = h("span", [
          h("Icon", {
            props: {
              type: "ios-paper"
            },
            style: {
              fontSize: "16px",
              position: "absolute"
            }
          }),
          h(
            "span",
            {
              style: {
                paddingLeft: "15px",
                paddingRight: "10px",
                marginLeft: "5px",
                marginRight: "5px"
              },
              on: {
                click: (e) => {
                  this.showHistory(e,data);
                }
              }
            },
            "历史"
          )
        ]);
        content.children.push(creatButton);
      }
      if (data.IsQuery) {
        var queryButton = h("span", [
          h("Icon", {
            props: {
              type: "md-search"
            },
            style: {
              fontSize: "16px",
              position: "absolute"
            }
          }),
          h(
            "span",
            {
              style: {
                paddingLeft: "15px",
                paddingRight: "10px",
                marginLeft: "5px",
                marginRight: "5px"
              },
              on: {
                click: (e) => {
                  this.queryLayer(e,data);
                }
              }
            },
            "查询"
          )
        ]);

        content.children.push(queryButton);
      }
      if (data.IsStatistics) {
        var statisticsButton = h("span", [
          h("Icon", {
            props: {
              type: "md-stats"
            },
            style: {
              fontSize: "16px",
              position: "absolute"
            }
          }),
          h(
            "span",
            {
              style: {
                paddingLeft: "15px",
                paddingRight: "10px",
                marginLeft: "5px",
                marginRight: "5px"
              },
              on: {
                click: (e) => {
                  this.statistics(e,data);
                }
              }
            },
            "统计"
          )
        ]);
        content.children.push(statisticsButton);
      }
      if (data.IAttachs && data.IAttachs.length > 0) {
        var IAttachButton = h("span", [
          h("Icon", {
            props: {
              type: "md-cloud-download"
            },
            style: {
              fontSize: "16px",
              position: "absolute"
            }
          }),
          h(
            "span",
            {
              style: {
                paddingLeft: "15px",
                paddingRight: "10px",
                marginLeft: "5px",
                marginRight: "5px"
              },
              on: {
                click: (e) => {
                  this.showIAttach(e,data);
                }
              }
            },
            "附件"
          )
        ]);
        content.children.push(IAttachButton);
      }
      return content;
    },

    //nodeCheck
    nodeCheck:function(node,tree){
console.log(node);
console.log(tree);
 // console.log(alldata);
    },
    //选中显示图层
    checkNode: function(alldata, index) {
      console.log(alldata);
      let choice2 = this.$refs.c.getCheckedNodes();
      let choice = this.$refs.c.getSelectedNodes();
      LayerManager.addLayer(alldata, choice);
      //let choice=this.getSelectedNodes();
      console.log(choice);
    },
    //点击弹出详细信息
    selectNode: function(data,node,com) {
      console.log(data);
        console.log(node);
          console.log(com);
      var m = this;
      if (data.children) {
        m.$refs.detailModal.datailToggle = false;

        return;
      }
      //给数据赋值
      //this.detailData = data.XXXX
      m.$refs.detailModal.datailToggle = true;
    },
    //显示历史信息
    showHistory: function(e,data) {
      e.stopPropagation();
      var m = this;
      //展示历史版本 给数据赋值
      // this.historyData = data.XXXXX;
      //  this.historyModal = true;
      m.$refs.historyModal.datailToggle = !m.$refs.historyModal.datailToggle;
    },
    //图层过滤
    queryLayer: function(e,data) {
      e.stopPropagation();
      var m = this;
      //给子组件传值
      this.layerData = data;
      //this.queryModal = true;
      //console.log(data);
      m.$refs.queryModal.datailToggle = !m.$refs.queryModal.datailToggle;
      return false;
    },
    //展示附件信息
    showIAttach: function(e,data) {
      e.stopPropagation();
      //弹出附件信息的模态框
      //this.attachData = data.XXXXX;
      this.attachModal = true;
      var m = this;
      m.$refs.attachModal.datailToggle = !m.$refs.attachModal.datailToggle;
    },
    //统计
    statistics: function(e,data) {

      e.stopPropagation();
    },
    //历史版本选中状态发生改变
    hisRowSelectChange: function(data) {
      //历史信息选中 或反选后响应的事件
    },
    //附件查看
    attachShow: function(index) {
      this.attachShowModal = true;
    },
    //附件下载
    attachDown: function(index) {
      //一个连接直接下载
      // window.location.href="";
    }
  }
};
</script>

<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
.detailTable {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}
.detailTable tbody tr {
  background: #fff;
  font-size: 12px;
  color: #666666;
}
.detailTable tbody td {
  line-height: 15px;
  text-align: left;
  padding: 1px 5px 1px 5px;
  height: 10px;
  border: 1px solid #d6d6d6;
  min-width: 60px;
  max-width: 220px;
}
</style>
